.dx-progressbar-container {
    height: 4px;
    background-color: @WIN10_PROGRESSBAR_CONTAINER_BACKGROUND_COLOR;
}

.dx-progressbar-range {
    background-color: @WIN10_PROGRESSBAR_ACCENT_COLOR;
}

.dx-progressbar-animating-segment {
    display: block;
    position: absolute;
    left: 0;
    opacity: 0;
    height: 4px;
    width: 4px;
    background-color: @WIN10_PROGRESSBAR_ACCENT_COLOR;
    .border-radius(50%);

    .animation(loader 4s infinite);
    .animation-timing(cubic-bezier(0.030, 0.615, 0.995, 0.415));
    .animation-fill-mode();
}

.dx-state-disabled.dx-progressbar {
    color: @WIN10_PROGRESSBAR_DISABLED_COLOR;

    .dx-progressbar-container {
        background-color: @WIN10_PROGRESSBAR_DISABLED_COLOR;
    }

    .dx-progressbar-animating-segment {
        .animation(none);
        background-color: @WIN10_PROGRESSBAR_ACCENT_COLOR;
    }

    .dx-progressbar-animating-segment-1 {
        left: 44%;
    }

    .dx-progressbar-animating-segment-2 {
        left: 47%;
    }

    .dx-progressbar-animating-segment-3 {
        left: 50%;
    }

    .dx-progressbar-animating-segment-4 {
        left: 53%;
    }

    .dx-progressbar-animating-segment-5 {
        left: 56%;
    }
}

.dx-rtl .dx-progressbar,
.dx-rtl.dx-progressbar {
    .dx-progressbar-animating-segment {
        left: auto;
        right: 0;
        .animation-name(loader-rtl);
    }
}

.dx-progressbar-animating-segment-1 {
    .animation-delay(1s);
}

.dx-progressbar-animating-segment-2 {
    .animation-delay(0.8s);
}

.dx-progressbar-animating-segment-3 {
    .animation-delay(0.6s);
}

.dx-progressbar-animating-segment-4 {
    .animation-delay(0.4s);
}

.dx-progressbar-animating-segment-5 {
    .animation-delay(0.2s);
}

@-webkit-keyframes loader {
    0% {
        left: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: 0;
    }
}

@-moz-keyframes loader {
    0% {
        left: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes loader {
    0% {
        left: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49% {
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: 0;
    }
}

@-ms-keyframes loader {
    0% {
        left: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes loader-rtl {
    0% {
        right: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        right: 100%;
        opacity: 0;
    }
}

@-moz-keyframes loader-rtl {
    0% {
        right: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        right: 100%;
        opacity: 0;
    }
}

@keyframes loader-rtl {
    0% {
        right: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        right: 100%;
        opacity: 0;
    }
}

@-ms-keyframes loader-rtl {
    0% {
        right: 0px;
    }

    0.1% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        right: 100%;
        opacity: 0;
    }
}
